<!--  frame 模板 -->
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>商城搜索</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css" />

	<style>
		body {
			background-color: #F8F8F8;
		}
		/* 搜索框 */

		.head {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			display: flex;
			align-items: center;
			height: 0.95rem;
			background-color: #ff502d;
			padding: 0 0.20rem;
		}

		.search {
			display: flex;
			align-items: center;
			width: 5.95rem;
			height: 0.60rem;
			background-color: #fff;
			border-radius: 0.30rem;
		}

		.search_icon {
			height: 0.38rem;
			width: 0.38rem;
			line-height: 0.38rem;
			font-size: 0.38rem;
			color: #eee;
			margin: 0 0.20rem;
		}

		.h_input {
			width: 4.80rem;
			height: 0.50rem;
			font-size: 0.28rem;
			color: #666;
		}

		.placehold {
			color: #e5e5e5;
			font-size: 0.28rem;
		}

		input[type="search"] {
			-webkit-appearance: none;
		}

		input::-webkit-search-cancel-button {
			display: none;
		}

		.search-btn {
			width: 0.80rem;
			font-size: 0.30rem;
			color: #fff;
			margin: 0 0.20rem 0 0.30rem;
		}
		/* 商品 */

		.scroll-view {
			margin-top: 50px;
			width: 100%;
		}

		.imgList_box {
			padding-bottom: 0.20rem;
			padding-left: 0.23rem;
			font-size: 0;
		}

		.imgList {
			width: 3.20rem;
			display: inline-block;
			margin: 0.30rem 0.15rem 0 0.15rem;
			background: #fff;
			border-radius: 0.15rem;
		}

		.shop_text {
			font-size: 0.28rem;
			color: #333;
			height: 0.32rem;
			line-height: 0.32rem;
			text-align: center;
			margin: 0.12rem 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.shop_img {
			width: 3.20rem;
			height: 3.20rem;
			border-radius: 0.15rem 0.15rem 0 0;
		}
	</style>
</head>

<body>
	<div class="content app">
		<!-- 搜索框 -->
		<div class="head">
			<form action="javascript:;" class="search">
				<div class="iconfont iconsousuo search_icon"></div>
				<input style="border:none;" @keyup.13="SearchConfirm" type="search" class="h_input" v-model="search" value="" placeholder="输入相关商品名称来进行搜索" placeholder-class="placehold"></input>
			</form>
			<div class="search-btn" @click="Search">搜索</div>
		</div>

		<!-- 展示商品 -->
		<div class="shop" v-if="searchList.length!=0">
			<div class="scroll">
				<div class="scroll-view">
					<div class="imgList_box">
						<div class="imgList" v-for="(item,index) in searchList" :key="index">
							<img class="shop_img" :src="item.image_center+'?imageView2/1/w/160/h/160'" @click="fnShopDetail(item.id)"></img>
							<div class="shop_text">{{item.product_name}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="searchList.length==0&&!isSearch" class="no-data">
			<img class="image" src="../image/nodata/yhj.png">
			<div class="title">暂无商品</div>
			<div class="content">请行动起来，去获取自己心仪的商品吧!</div>
		</div>
		<div v-if="searchList.length==0&&isSearch" class="no-data">
			<img src="../image/nodata/search.png">
			<div class="title">未搜索到相关商品</div>
			<div class="content">请重新输入关键字进行搜索!</div>
		</div>
	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
	window.addEventListener("apiready", function() {
		index()
	});

	function index() {
		var vm = new Vue({
			el: ".app",
			data: {
				search: '',
				isSearch: false,
				searchList: [],
				products: []
			},
			mounted: function() {
				this.getAllmall()
			},
			methods: {

				//获取所有商品
				getAllmall: function() {
					AjaxSafe({
						url: '/xapp/app/product/mall',
						loader: false,
						success: function(ret) {
							//console.log(ret)
							var products = []
							if (ret.state) {
								var ordinary = (ret.data.ordinary_product || []).map(function(item) {
									(item.sub_type || []).forEach(function(type) {
										(type.products || []).forEach(function(product) {
											products.push(product);
										});
									});
									return item
								})
								var presale = (ret.data.presale_product || []).map(function(item) {
									(item.sub_type || []).forEach(function(type) {
										(type.products || []).forEach(function(product) {
											products.push(product);
										});
									});
									return item
								})
								vm.products = products
							}
						},
					})
				},

				//点击键盘搜索按钮
				SearchConfirm: function() {
					vm.shopSearch()
				},

				Search: function() {
					vm.shopSearch()
				},

				//商品搜索
				shopSearch: function() {
					vm.isSearch = vm.search != '';
					if (vm.search != '') {
						api.showProgress({title: '',text: '加载中...',modal: false});
						setTimeout(function(){
							api.hideProgress();
							vm.searchList = vm.products.filter(function(item) {
								return item.product_name.indexOf(vm.search) >= 0;
							})
							vm.isSearch = true
						},800)

					} else {
						api.showProgress({title: '',text: '加载中...',modal: false});
						setTimeout(function(){
              api.hideProgress();
							vm.searchList = []
							vm.isSearch = true
						},800)
					}
				},

				//跳转商品详情
				fnShopDetail:function(id){
					if( !localdata.get("userinfo") ){//未登录提示跳转登录界面
						TS_UserLogin()
						return
					}
					api.openWin({name: 'commodity_detail',url: './commodity_detail.html',pageParam: {}})
					localdata.set('productId',id)
				},


			},
		});
	}
</script>

</html>
